<template>
  <!-- 三个墙的列表展示组件 -->
  <div>
    <div class="content" v-for="item in worksData" :key="item.id">
      <div class="content-item">
        <div class="headImg">
          <img v-if="item.user_pic" :src="item.user_pic" alt="头像" @click="checkimg(item.user_pic)"/>
          <div v-else class="anonymity">匿名</div>
        </div>
        <div class="userinfo">
          <h3 @click="visithome(item)" title="访问该主页">{{item.nickname?item.nickname:'匿名'}}</h3>
          <p class="timer">
            <a>{{timer(item.timer)}}</a> 来自
            <a>{{item.from?item.from:'匿名'}}</a>
          </p>
          <p class="type">#{{item.cha_types}}#</p>
          <!-- 内容 -->
          <p class="message" v-if="item.by_name">
            我想对
            <a>{{item.by_name}}</a>
            说:&emsp;{{item.message}}
          </p>
          <p class="message" v-else>{{item.message}}</p>
          <div class="picture" v-if="item.pic_walls">
            <div class="box-item" v-for="(subItem,i) in item.pic_walls" :key="i">
              <img :src="subItem" @click="checkimg(subItem)" />
            </div>
          </div>
          <FooterReply :item="item"></FooterReply>
        </div>
      </div>
    </div>
    <!-- 图片放大对话框 -->
    <el-dialog title="查看" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="checkimg" v-if="checkimgurl">
        <img :src="checkimgurl" alt="图片" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import FooterReply from "@/views/footerReply/index.vue";
export default {
  props: ["worksData"],
  data() {
    return {
      dialogVisible: false, //图片放大对话框的显示与隐藏
      checkimgurl: undefined, //放大的图片地址
    };
  },
  methods: {
    // 关闭对话框的回调
    handleClose(done) {
      done();
    },
    checkimg(img) {
      this.dialogVisible = true; //打开对话框
      this.checkimgurl = img; //赋值
    },
    // 打开首页
    visithome(item) {
      // 跳转到主页
      this.$router.push({
        name: "/mine",
        params: { uuId: item.uuId },
      });
    },
  },
  components: {
    FooterReply,
  },
  computed: {
    // 解决mysql返回值带z带t问题
    timer() {
      return (timer) => {
        return dayjs(timer).format("YYYY-MM-DD HH:mm:ss");
      };
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  border-bottom: 1px solid #008c8c;
  .content-item {
    display: flex;
    padding: 10px 0;
    .headImg {
      margin-right: 10px;
      .anonymity {
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: #8590a6;
        border-radius: 50%;
        font-weight: 700;
        color: #fff;
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .userinfo {
      h3 {
        color: #e6d9a4;
        font-size: 16px;
        font-weight: 700;
      }
      .timer {
        a {
          font-size: 12px;
          color: #7c5115;
        }
      }
      .type {
        font-size: 14px;
        color: #a2b6aa;
      }
      .message {
        max-width: 638px;
        box-sizing: border-box;
        word-wrap: break-word;
        white-space: pre-wrap;
        color: #d17045;
        text-indent: 2em;
        a {
          font-size: 16px;
          font-weight: 700;
          margin-right: 5px;
          color: #eda3ac;
        }
      }
      .picture {
        max-width: 638px;
        padding: 10px 20px 20px 0;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        .box-item {
          width: 33.3333%;
          padding-left: 0.25rem;
          padding-top: 0.25rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
      }
    }
  }
}
.checkimg {
  width: 100%;
  height: 100%;
  text-align: center;
  img {
    border-radius: 10px;
    width: 100%;
    height: auto;
  }
}
</style>